<template>
  <div>
    <NavHeader></NavHeader>

    <!-- 轮播图 -->
    <swiper ref="mySwiper" :options="swiperOptions" class="swiper">
      <swiper-slide v-for="item in slideList" :key="item.id">
        <img v-lazy="item.s_photos[0].path" alt="" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <!--OPPO 产品区域 -->
    <div class="commodity-content">
      <div class="container">
        <div class="oppo">
          <div class="title">OPPO 专区</div>
          <div class="title-right">
            <span :class="border" @mouseenter="oppophone">手机</span
            ><span :class="border2" @mouseenter="intelligence">智能硬件</span>
          </div>
        </div>
        <div class="nav-box" :class="styleStr">
          <div class="nav-list">
            <div class="item" v-for="item in Reno6" :key="item.id">
              <a :href="`#/product/${item.id}`">
                <div class="item-desc">新品</div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">{{ `￥${item.price}` }}</div>
                <div class="item-img">
                  <img v-lazy="item.s_goods_photos[0].path" alt="" />
                </div>
              </a>
            </div>
            <div class="item2" v-for="item in firstList" :key="item.id">
              <a :href="`#/product/${item.id}`">
                <div class="item-img">
                  <img v-lazy="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">{{ `￥${item.price}` }}</div>
                <div class="item-cart" @click.prevent="addCart(item)">
                  加入购物车
                </div>
              </a>
            </div>
          </div>
          <div class="nav-list">
            <div class="item2" v-for="item in secondList" :key="item.id">
              <a :href="`#/product/${item.id}`">
                <div class="item-img">
                  <img v-lazy="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">{{ `￥${item.price}` }}</div>
                <div class="item-cart" @click.prevent="addCart(item)">
                  加入购物车
                </div>
              </a>
            </div>
          </div>
        </div>

        <div class="nav-box2" :class="styleStr2">
          <div class="nav-list">
            <div class="item" v-for="item in Reno62" :key="item.id">
              <div class="item-name">{{ item.name }}</div>
              <div class="item-price">{{ `￥${item.price}` }}</div>
              <div class="item-img">
                <img v-lazy="item.s_goods_photos[0].path" alt="" />
              </div>
            </div>
            <div class="item2" v-for="item in firstList2" :key="item.id">
              <a :href="`#/product/${item.id}`">
                <div class="item-img">
                  <img v-lazy="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">{{ `￥${item.price}` }}</div>
                <div class="item-cart" @click.prevent="addCart(item)">
                  加入购物车
                </div>
              </a>
            </div>
          </div>
          <div class="nav-list">
            <div class="item2" v-for="item in secondList2" :key="item.id">
              <a :href="`#/product/${item.id}`">
                <div class="item-img">
                  <img v-lazy="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">{{ `￥${item.price}` }}</div>
                <div class="item-cart" @click.prevent="addCart(item)">
                  加入购物车
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--一加 产品区域 -->
    <div class="commodity-content">
      <div class="container">
        <div class="oppo">
          <div class="title">一加 专区</div>
          <div class="title-right">
            <span :class="border3" @mouseenter="oppophone2">手机</span
            ><span :class="border4" @mouseenter="intelligence2">其他</span>
          </div>
        </div>
        <div class="nav-box" :class="styleStr3">
          <div class="nav-list">
            <div class="item" v-for="item in Reno63" :key="item.id">
              <div class="item-desc">新品</div>
              <div class="item-name">{{ item.name }}</div>
              <div class="item-price">{{ `￥${item.price}` }}</div>
              <div class="item-img">
                <img v-lazy="item.s_goods_photos[0].path" alt="" />
              </div>
            </div>
            <div class="item2" v-for="item in firstList3" :key="item.id">
              <a :href="`#/product/${item.id}`">
                <div class="item-img">
                  <img v-lazy="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">{{ `￥${item.price}` }}</div>
                <div class="item-cart" @click.prevent="addCart(item)">
                  加入购物车
                </div>
              </a>
            </div>
          </div>
          <div class="nav-list">
            <div class="item2" v-for="item in secondList3" :key="item.id">
              <a :href="`#/product/${item.id}`">
                <div class="item-img">
                  <img v-lazy="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">{{ `￥${item.price}` }}</div>
                <div class="item-cart" @click.prevent="addCart(item)">
                  加入购物车
                </div>
              </a>
            </div>
          </div>
        </div>

        <div class="nav-box2" :class="styleStr4">
          <div class="nav-list">
            <div class="item" v-for="item in Reno64" :key="item.id">
              <div class="item-name">{{ item.name }}</div>
              <div class="item-price">{{ `￥${item.price}` }}</div>
              <div class="item-img">
                <img v-lazy="item.s_goods_photos[0].path" alt="" />
              </div>
            </div>
            <div class="item2" v-for="item in firstList4" :key="item.id">
              <a :href="`#/product/${item.id}`">
                <div class="item-img">
                  <img v-lazy="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">{{ `￥${item.price}` }}</div>
                <div class="item-cart" @click.prevent="addCart(item)">
                  加入购物车
                </div>
              </a>
            </div>
          </div>
          <div class="nav-list">
            <div class="item2" v-for="item in secondList4" :key="item.id">
              <a :href="`#/product/${item.id}`">
                <div class="item-img">
                  <img v-lazy="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">{{ `￥${item.price}` }}</div>
                <div class="item-cart" @click.prevent="addCart(item)">
                  加入购物车
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- redlme 产品区域 -->
    <div class="commodity-content">
      <div class="container">
        <div class="oppo">
          <div class="title">Redlme 专区</div>
          <div class="title-right">
            <span :class="border5" @mouseenter="oppophone3">手机</span
            ><span :class="border6" @mouseenter="intelligence3">其他</span>
          </div>
        </div>
        <div class="nav-box" :class="styleStr5">
          <div class="nav-list">
            <div class="item" v-for="item in Reno65" :key="item.id">
              <div class="item-desc">新品</div>
              <div class="item-name">{{ item.name }}</div>
              <div class="item-price">{{ `￥${item.price}` }}</div>
              <div class="item-img">
                <img v-lazy="item.s_goods_photos[0].path" alt="" />
              </div>
            </div>
            <div class="item2" v-for="item in firstList5" :key="item.id">
              <a :href="`#/product/${item.id}`">
                <div class="item-img">
                  <img v-lazy="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">{{ `￥${item.price}` }}</div>
                <div class="item-cart" @click.prevent="addCart(item)">
                  加入购物车
                </div>
              </a>
            </div>
          </div>
          <div class="nav-list">
            <div class="item2" v-for="item in secondList5" :key="item.id">
              <a :href="`#/product/${item.id}`">
                <div class="item-img">
                  <img v-lazy="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">{{ `￥${item.price}` }}</div>
                <div class="item-cart" @click.prevent="addCart(item)">
                  加入购物车
                </div>
              </a>
            </div>
          </div>
        </div>

        <div class="nav-box2" :class="styleStr6">
          <div class="nav-list">
            <div class="item" v-for="item in Reno66" :key="item.id">
              <div class="item-name">{{ item.name }}</div>
              <div class="item-price">{{ `￥${item.price}` }}</div>
              <div class="item-img">
                <img v-lazy="item.s_goods_photos[0].path" alt="" />
              </div>
            </div>
            <div class="item2" v-for="item in firstList6" :key="item.id">
              <a :href="`#/product/${item.id}`">
                <div class="item-img">
                  <img v-lazy="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">{{ `￥${item.price}` }}</div>
                <div class="item-cart" @click.prevent="addCart(item)">
                  加入购物车
                </div>
              </a>
            </div>
          </div>
          <div class="nav-list">
            <div class="item2" v-for="item in secondList6" :key="item.id">
              <a :href="`#/product/${item.id}`">
                <div class="item-img">
                  <img v-lazy="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">{{ `￥${item.price}` }}</div>
                <div class="item-cart" @click.prevent="addCart(item)">
                  加入购物车
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Modal
      :title="'提示'"
      v-show="isShow"
      :btnType="1"
      @cancel="isShow = false"
      @submit="gotoCart"
    >
      <template v-slot:body>
        <div>
          <div>{{ name }} 商品添加成功</div>
        </div>
      </template>
    </Modal>

    <NavFooter></NavFooter>
  </div>
</template>

<script>
import NavHeader from "@/components/NavHeader.vue";
import NavFooter from "@/components/NavFooter.vue";
import { getLunBos, getGoods, getCart } from "../assets/request.js";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import Modal from "../components/Modal.vue";
export default {
  components: {
    Swiper,
    Modal,
    SwiperSlide,
    NavHeader,
    NavFooter,
  },
  directives: {
    swiper: directive,
  },
  data() {
    return {
      name: "",
      isShow: false,
      styleStr: "active",
      styleStr2: "error",
      styleStr3: "active",
      styleStr4: "error",
      styleStr5: "active",
      styleStr6: "error",
      styleStr7: "active",
      styleStr8: "error",
      border: "border",
      border2: null,
      border3: "border",
      border4: null,
      border5: "border",
      border6: null,
      slideList: [],
      goods: [],
      Reno6: [],
      Reno6list: [],
      Reno62: [],
      Reno6list2: [],
      Reno63: [],
      Reno6list3: [],
      Reno64: [],
      Reno6list4: [],
      Reno65: [],
      Reno6list5: [],
      Reno66: [],
      Reno6list6: [],
      swiperOptions: {
        //改变轮播效果
        //下面配置swiper的属性 是只能用在swiper5.x的版本
        //如果版本太高，我们需要手动去降低版本
        autoplay: {
          autoplay: true,
          delay: 4000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        effect: "fade",
        fadeEffect: {
          crossFade: true,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        elementClass: "my-lazy",

        // Some Swiper option/callback...
      },
    };
  },
  async created() {
    let res = await getLunBos({
      project_id: 78,
    });
    this.slideList = res.rows;
    let goods = await getGoods({
      project_id: 78,
      limit: 100,
    });
    this.goods = goods.rows.sort((a, b) => a.id - b.id);
    // console.log(this.goods[0].s_goods_photos[0].path);
    // this.cc = this.goods[0].s_goods_photos[0].path;
    // console.log(this.cc);
    this.Reno6 = this.goods.slice(34, 35);
    this.Reno6list = this.goods.slice(35, 41);
    this.Reno62 = this.goods.slice(41, 42);
    this.Reno6list2 = this.goods.slice(42, 48);
    this.Reno63 = this.goods.slice(48, 49);
    this.Reno6list3 = this.goods.slice(49, 55);
    this.Reno64 = this.goods.slice(55, 56);
    this.Reno6list4 = this.goods.slice(56, 62);
    this.Reno65 = this.goods.slice(62, 63);
    this.Reno6list5 = this.goods.slice(63, 69);
    this.Reno66 = this.goods.slice(69, 70);
    this.Reno6list6 = this.goods.slice(70, 76);
  },
  computed: {
    firstList() {
      let arr = this.Reno6list;
      return arr.slice(0, 2);
    },
    secondList() {
      let arr = this.Reno6list;
      return arr.slice(2, 6);
    },
    firstList2() {
      let arr = this.Reno6list2;
      return arr.slice(0, 2);
    },
    secondList2() {
      let arr = this.Reno6list2;
      return arr.slice(2, 6);
    },
    firstList3() {
      let arr = this.Reno6list3;
      return arr.slice(0, 2);
    },
    secondList3() {
      let arr = this.Reno6list3;
      return arr.slice(2, 6);
    },
    firstList4() {
      let arr = this.Reno6list4;
      return arr.slice(0, 2);
    },
    secondList4() {
      let arr = this.Reno6list4;
      return arr.slice(2, 6);
    },
    firstList5() {
      let arr = this.Reno6list5;
      return arr.slice(0, 2);
    },
    secondList5() {
      let arr = this.Reno6list5;
      return arr.slice(2, 6);
    },
    firstList6() {
      let arr = this.Reno6list6;
      return arr.slice(0, 2);
    },
    secondList6() {
      let arr = this.Reno6list6;
      return arr.slice(2, 6);
    },
  },
  methods: {
    gotoCart() {
      this.$router.push("/card");
    },
    async addCart(item) {
      // 1.先打开弹窗
      let token = sessionStorage.getItem("token");
      if (token) {
        this.isShow = true;
        this.name = item.name;
        // 2.发送请求
        await getCart({
          num: 1,
          goods_id: item.id,
        });
      } else {
        this.$router.push("/login");
      }
    },

    // 鼠标移入 显示 另外的数据
    oppophone() {
      this.styleStr = "active";
      this.styleStr2 = "error";
      this.border = "border";
      this.border2 = null;
    },
    intelligence() {
      this.styleStr = "error";
      this.styleStr2 = "active";
      this.border2 = "border";
      this.border = null;
    },
    oppophone2() {
      this.styleStr3 = "active";
      this.styleStr4 = "error";
      this.border3 = "border";
      this.border4 = null;
    },
    intelligence2() {
      this.styleStr3 = "error";
      this.styleStr4 = "active";
      this.border4 = "border";
      this.border3 = null;
    },
    oppophone3() {
      this.styleStr5 = "active";
      this.styleStr6 = "error";
      this.border5 = "border";
      this.border6 = null;
    },
    intelligence3() {
      this.styleStr5 = "error";
      this.styleStr6 = "active";
      this.border5 = null;
      this.border6 = "border";
    },
  },
};
</script>

<style lang="scss" scoped>
.border {
  border-radius: 18px;
  background: #ffffff;
  color: #f34141;
}
.active {
  display: block;
}
.error {
  display: none;
}
.swiper {
  width: 100%;
  height: 800px;
  img {
    width: 100%;
    height: 100%;
  }
}
.commodity-content {
  width: 100%;
  background: #f4f4f4;
  padding-top: 100px;
  padding-bottom: 50px;

  .container {
    width: 1200px;
    margin: 0 auto;
    .oppo {
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 26px;
      }
      .title-right {
        span {
          font-size: 16px;
          line-height: 34px;
          display: inline-block;
          padding: 0 18px;
          margin-right: 10px;
          cursor: pointer;
          flex: 0 0 auto;

          // 鼠标移到到谁才添加这个样式
        }
      }
    }
    .nav-list {
      display: flex;
      justify-content: space-between;
      margin-top: 28px;
      .item {
        width: 580px;
        height: 440px;
        background: #fff;
        position: relative;
        .item-desc {
          color: #f34141;
          border: 1px solid #f34141;
          background-color: rgba(243, 65, 65, 0.15);
          position: absolute;
          left: 40px;
          top: 40px;
          width: 77px;
          height: 28px;
          line-height: 28px;
          border-radius: 3px;
          font-size: 14px;
          text-align: center;
          z-index: 9;
          display: inline-block;
        }
        .item-img {
          img {
            width: 100%;
            height: 100%;
          }
        }
        .item-name {
          position: absolute;
          font-size: 25px;
          top: 39%;
          left: 10%;
        }
        .item-price {
          position: absolute;
          font-size: 25px;
          top: 47%;
          left: 19%;
        }
        &:hover {
          cursor: pointer;
          box-shadow: #ccc 0px 10px 10px;
          transition: all 0.2s linear;
        }
      }
      .item2 {
        width: 270px;
        height: 440px;
        background: #fff;
        .item-img {
          width: 270px;
          height: 203px;
          margin-top: 85px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .item-name {
          font-size: 16px;
          line-height: 70px;
          text-align: center;
        }
        .item-price {
          font-size: 16px;
          line-height: 40px;
          text-align: center;
        }
        .item-cart {
          height: 23px;
          line-height: 23px;
          width: 100px;
          margin: 0 auto;
          border-radius: 5px;
          font-size: 14px;
          text-align: center;
          background-color: red;
          color: #fff;
        }

        &:hover {
          cursor: pointer;
          box-shadow: #ccc 0px 10px 10px;
          transition: all 0.2s linear;
        }
      }
    }
  }
}
</style>